<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-02 09:54:41
 * @LastEditTime : 2023-12-08 15:49:30
-->
<script lang="ts" setup name="SidebarItem">
import type { Menu } from '@g/types/global'
import SidebarItem from './sub.vue'
import { InjectionI18nTitle } from '@/global/utils/injection-keys'
import useSettingsStore from '@/global/store/modules/settings'
import router from '@/global/router'

const props = defineProps({
  item: {
    type: Object as () => Menu.recordMainRaw,
    required: true
  },
  icon: {
    type: Boolean,
    default: true
  }
})
defineEmits(['handLink'])
const settingsStore = useSettingsStore()

const generateI18nTitle = inject(InjectionI18nTitle) as Function
const showIcon = computed(() => settingsStore.settings.menu.menuMode === EMenuModel.ONLY_SIDE || settingsStore.settings.menu.showTopMenuIcon)

const getTitleStyle = (item: any) => {
  return {
    fontSize: generateI18nTitle(item.meta?.i18n, item.meta?.title).length > 4 ? '12px' : '14px'
  }
}

const isHandChildren = computed(() => {
  if (props.item.children?.length > 1)
    return true
  return (props.item.children?.length === 1 && (props.item.children[0].path !== (props.item as any)?.path))
})

const isSingleMenu = computed(() => {
  return (props.item.children?.length === 1 && props.item.children[0].path === (props.item as any)?.path)
})

const handLinkTo = () => {
  const item: any = props.item
  if (item?.jumpType === MenuJumpEnum.EXTERNAL_LINK) {
    window.open(item.link, '_blank')
  }
  else {
    router.push({
      path: item?.path
    })
  }
}
</script>

<template>
  <div class="sidebar-item">
    <el-sub-menu
      v-if="isHandChildren"
      :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
      :index="JSON.stringify(item)"
      popper-class="fa-popup-menu"
    >
      <template #title>
        <div class="item">
          <template v-if="showIcon">
            <div v-if="item.meta?.icon" class="title-icon unactive">
              <IkSvgIcon :name="item.meta.icon" :size="24" :padding="0" />
            </div>
            <div v-if="item.meta?.activeIcon || item.meta?.icon" class="title-icon active">
              <IkSvgIcon :name="(item.meta.activeIcon || item.meta.icon) as string" :size="24" :padding="0" />
            </div>
          </template>
          <span class="title" :style="getTitleStyle(item)">{{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}</span>
        </div>
      </template>
      <template v-for="route in item.children">
        <SidebarItem v-if="route.meta?.sidebar !== false" :key="route.path" :item="route" />
      </template>
    </el-sub-menu>
    <template v-else-if="isSingleMenu">
      <el-sub-menu
        v-if="item.children[0]?.meta?.sidebar !== false"
        :title="generateI18nTitle(item.meta?.i18n, item.meta?.title)"
        :index="JSON.stringify(item)"
        popper-class="fa-popup-menu none-body"
      >
        <template #title>
          <div class="item" @click="handLinkTo">
            <template v-if="showIcon">
              <div v-if="item.meta?.icon" class="title-icon unactive">
                <IkSvgIcon :name="item.meta.icon" :size="24" :padding="0" />
              </div>
              <div v-if="item.meta?.activeIcon || item.meta?.icon" class="title-icon active">
                <IkSvgIcon :name="(item.meta.activeIcon || item.meta.icon) as string" :size="24" :padding="0" />
              </div>
            </template>
            <span class="title" :style="getTitleStyle(item)">{{ generateI18nTitle(item.meta?.i18n, item.meta?.title) }}</span>
          </div>
        </template>
      </el-sub-menu>
    </template>
    <template v-else>
      <SidebarItem
        :key="item.meta?.title"
        :link="false"
        :item="item"
        @hand-link="$emit('handLink')"
      />
    </template>
  </div>
</template>

<style lang="scss" scoped>
.fa-popup-menu {
  border: none;
}

:deep(.el-sub-menu) {
  .item .title{
    padding-top: 6px;
  }

  >.el-sub-menu__title .title-icon.active {
    display: none;
  }

  &.is-active {
    >.el-sub-menu__title .title-icon.unactive {
      display: none;
    }

    >.el-sub-menu__title .title-icon.active {
      display: flex;
    }
  }
}
</style>
